import React, { Component } from 'react'
import Test from './Test'
// 非受控组件: 其实就是学习如何获取真实dom

// 1. document.querySelector....
// 2. e.target 只能获取事件目标

export default class App extends Component {
  state = {
    xxx: '',
  }
  render() {
    return (
      <div>
        {/* 当input的真实dom创建完毕之后,react会自动将input真实dom的地址赋值给ref对象的current属性 */}
        <input
          type="text"
          ref={(node) => {
            // 当这个标签的真实dom创建完毕之后,这个回调触发
            // 并且会将当前标签的真实dom传递进来,我们写个形参接收即可
            // console.log(node)
            this.node = node
          }}
        />

        <Test
          ref={(node) => {
            console.log(node)
          }}
        ></Test>

        <button
          onClick={(e) => {
            //点击按钮让文本框获取焦点
            console.log(this.node)
          }}
        >
          按钮
        </button>
      </div>
    )
  }
}
